<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      li {
        list-style: none;
      }

      .nav {
        width: 100vw;
        height: 10vw;
        overflow: hidden;
        border-bottom: 1px solid #eee;
      }

      .nav__wrapper {
        display: inline-flex;
        height: 10vw;
      }

      .nav__item {
        width: 20vw;
        text-align: center;
        line-height: 10vw;
      }

      .nav__item.active {
        border-bottom: 3px solid orange;
      }

      .content {
        overflow: hidden;
        width: 100vw;
        height: calc(100vh - 10vw);
      }

      .content__wrapper {
        display: inline-flex;
      }

      .content__item {
        width: 100vw;
        font-size: 30px;
        text-align: center;
        padding-top: 200px;
        height: 200vh;
      }

      .content__item:nth-child(2n + 1) {
        background-color: pink;
      }

      .content__item:nth-child(2n + 2) {
        background-color: lightblue;
      }

      .content__item:nth-child(2n + 3) {
        background-color: violet;
      }

      .content__item:nth-child(2n + 4) {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="nav">
        <ul class="nav__wrapper">
          <li class="nav__item active">新闻</li>
          <li class="nav__item">体育</li>
          <li class="nav__item">社会</li>
          <li class="nav__item">财经</li>
          <li class="nav__item">娱乐</li>
          <li class="nav__item">汽车</li>
          <li class="nav__item">游戏</li>
        </ul>
      </div>
      <div class="content">
        <div class="content__wrapper">
          <div class="content__item">新闻</div>
          <div class="content__item">体育</div>
          <div class="content__item">社会</div>
          <div class="content__item">财经</div>
          <div class="content__item">娱乐</div>
          <div class="content__item">汽车</div>
          <div class="content__item">游戏</div>
        </div>
      </div>
    </div>
    <script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>
    <script>
      var navBs = BetterScroll.createBScroll(".nav", {
        scrollX: true,
        click: true,
      });

      var contentBs = BetterScroll.createBScroll(".content", {
        scrollX: true,
        scrollY: true,
        momentum: false,
        bounce: {
          top: true,
          bottom: false,
          left: false,
          right: false,
        },
      });

      var navItems = document.querySelectorAll(".nav__item");
      var contentItems = document.querySelectorAll(".content__item");
      var contentItemWidth = contentItems[0].offsetWidth;
      var currentIndex = 0;

      for (var i = 0; i < navItems.length; i++) {
        navItems[i].setAttribute("data-index", i);
        contentItems[i].setAttribute("data-index", i);

        navItems[i].onclick = function () {
          var index = this.getAttribute("data-index");
          console.log(Math.abs(index - currentIndex));
          contentBs.scrollToElement(
            contentItems[index],
            300 * Math.abs(index - currentIndex)
          );
          navBs.scrollToElement(navItems[index], 300, -100);
          currentIndex = index;
          for (var i = 0; i < navItems.length; i++) {
            navItems[i].classList.remove("active");
          }
          this.classList.add("active");
        };
      }

      var flag = false;

      function debounce(callback, time = 300) {
        var timer = null;

        return function () {
          clearTimeout(timer);
          var that = this;
          var args = arguments;

          timer = setTimeout(function () {
            callback && callback.apply(that, args);
          }, time);
        };
      }

      var scrollEndEvent = debounce(function (e) {
        console.log(contentBs.directionY);
        if (contentBs.directionY === 1 || contentBs.directionY === -1) {
          console.log("纵向滚动");
          return;
        }

        if (flag) return;

        flag = true;
        // contentBs.off("scrollEnd", scrollEndEvent);
        var index = ~~(Math.abs(e.x) / contentItemWidth);
        var remain = 0;
        // 考虑 从左往右划的情况 此时 contentBs.directionX = -1
        if (contentBs.directionX === -1) {
          remain =
            Math.abs(e.x % contentItemWidth) < (contentItemWidth * 4) / 5
              ? 0
              : 1;
        } else if (contentBs.directionX === 1) {
          remain =
            Math.abs(e.x % contentItemWidth) > contentItemWidth / 5 ? 1 : 0;
        }

        console.log("remain" + remain);
        currentIndex = index + remain;

        if (currentIndex < 0) {
          currentIndex = 0;
        }

        if (currentIndex > contentItems.length - 1) {
          currentIndex = contentItems.length - 1;
        }

        console.log(currentIndex);
        try {
          // contentBs.scrollToElement(contentItems[currentIndex], 300);
          contentBs.scrollTo(-currentIndex * contentItemWidth, e.y, 300);

          navBs.scrollToElement(navItems[currentIndex], 300, -100);
        } catch (e) {
          console.log(e);
        }

        for (var i = 0; i < navItems.length; i++) {
          navItems[i].classList.remove("active");
        }
        navItems[currentIndex].classList.add("active");

        setTimeout(function () {
          // contentBs.on("scrollEnd", scrollEndEvent);
          flag = false;
        }, 350);
      }, 4);

      contentBs.on("scrollEnd", scrollEndEvent);

      // var wrapper2 = document.querySelector("#wrapper2")
      // var bs2 = new BScroll('.nav__wrapper', {
      //     scrollX: true,
      //     bounce: false
      // })
    </script>
  </body>
</html>
